<template>
  <main-wrap>
    <div class="appraiseHead">
      <div class="shifu">
        <img :src="txsrc">
        <span>{{order_detail.repairUserObj.name}}</span>
      </div>
      <star-rating class="starWrap" v-model="starrate" :increment="0.5" :star-size="22" :show-rating="false" :padding="10"></star-rating>
      <span class="scoreWrap">{{starrate}} 分</span>
    </div>

    <my-textarea @areatextchg="areatextchg" :pholder="'请在这里输入评语'"></my-textarea>

    <div class="weui-cells weui-cells_checkbox">
      <label class="weui-cell weui-check__label" for="s11">
          <div class="weui-cell__hd">
              <input type="checkbox" class="weui-check" name="checkbox1" id="s11" v-model="anonymous">
              <i class="weui-icon-checked"></i>
          </div>
          <div class="weui-cell__bd">
              <p class="fullL">
                <span class="partB">匿名评价</span>
                <span class="tipsRight partS">您写的评价将以匿名形式展现</span>
              </p>
          </div>
      </label>
    </div>

    <div class="paddingP3 mtp4">
      <a href="javascript:;" class="weui-btn weui-btn_primary" :class="{'weui-btn_disabled': btnDisabled}" @click="gonext">评价</a>
    </div>
  </main-wrap>
</template>

<script>
import MainWrap from '@/components/mainWrap'
import StarRating from 'vue-star-rating'
import MyTextarea from '@/components/mytextarea'
import { mapState } from 'vuex'
export default{
  name: 'Opinion',
  data () {
    return {
      // 'tx': require('@/assets/imgs/Desert.jpg'),
      starrate: 5,
      appraisetext: '',
      anonymous: true,
      btnDisabled: true
    }
  },
  components: {
    MainWrap,
    StarRating,
    MyTextarea
  },
  computed: {
    ...mapState(['order_detail']),
    txsrc () {
      return this.cm.getAvatar(this.order_detail.repairUserObj.avatarUrl)
    }
  },
  watch: {
    appraisetext () {
      if (this.appraisetext !== '') {
        this.btnDisabled = false
      } else {
        this.btnDisabled = true
      }
    }
  },
  methods: {
    gonext () {
      if (!this.btnDisabled) {
        this.$toast.loading({
          duration: 0,
          message: '请稍等...'
        })

        let params = {
          repairId: localStorage.oid,
          star: this.starrate,
          desc: this.appraisetext,
          anonymous: this.anonymous ? 1 : 0
        }
        this.cm.myajax('/sys/userrepair/repairEvaluate', params, (data) => {
          this.$toast.clear()
          localStorage.ostat = '50'
          this.$router.push({
            path: '/opersucc',
            query: {
              mainbtnurl: '/orderdetail'
            }
          })
        })
      }
    },
    areatextchg (text) {
      this.appraisetext = text
    }
  }
}
</script>

<style>
.appraiseHead{
  background: white;
  padding: .3rem .2rem;
  display: flex;
}
.shifu img{
  width: .8rem;
}
.shifu span{
  margin-left: .1rem;
}
.starWrap{
  flex: 1;
  text-align: center;
  align-self: center;
}
.vue-star-rating{
  margin: 0 auto;
}
.scoreWrap{
  display: inline-block;
  width: 50px;
  align-self: center;
  font-size: .36rem
}

.weui-cells_checkbox{
  margin-top: -1px;
}
</style>
